<template>
  <div class="series-panel" :class="{ 'collapsed': collapsed }">
    <panel-toggle 
      :collapsed="collapsed" 
      @toggle="$emit('toggle')"
      title="切换序列面板">
    </panel-toggle>
    
    <div class="panel-content" v-if="!collapsed">
      <div class="panel-header">
        <h3>检查序列</h3>
      </div>
      
      <div class="studies-list">
        <div class="study-item" 
             v-for="study in studyList" 
             :key="study.ID">
          <div class="study-header" 
               :class="{ 'active': study.ID === activeStudyId }"
               @click="$emit('toggle-study', study.ID)">
            <div class="study-date">{{ formatStudyDate(study.MainDicomTags.StudyDate) }}</div>
            <div class="study-desc">{{ study.MainDicomTags.StudyDescription || '未知检查' }}</div>
          </div>
          
          <div class="series-list" v-if="study.ID === activeStudyId">
            <div class="series-item" 
                 v-for="series in filteredSeries(study.ID)" 
                 :key="series.id"
                 :class="{ 'active': series.id === activeSeries }"
                 @click="$emit('load-series', series.id)">
              
              <div class="series-thumbnail">
                <div class="thumbnail-placeholder" v-if="!series.thumbnailUrl">
                  <i class="el-icon-picture-outline"></i>
                  <div class="series-number-badge">{{ series.number }}</div>
                </div>
                <img v-if="series.thumbnailUrl" :src="series.thumbnailUrl" alt="序列缩略图">
                <div class="loading-overlay" v-if="series.loading">
                  <div class="loading-spinner"></div>
                </div>
                <div class="series-loading-bar" v-if="series.loading || series.loadProgress > 0">
                  <div class="loading-progress" :style="{width: series.loadProgress + '%'}"></div>
                  <span class="loading-percentage" v-if="series.loadProgress > 0">{{series.loadProgress}}%</span>
                </div>
              </div>
              
              <div class="series-info">
                <div class="series-modality">{{ series.modality }}</div>
                <div class="series-number">序列 {{ series.number }}</div>
                <div class="series-description">{{ series.description }}</div>
                <div class="series-count" v-if="series.instances">
                  {{ series.instances.length }}张
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PanelToggle from './PanelToggle.vue'

export default {
  name: 'SeriesPanel',
  components: {
    PanelToggle
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    studyList: {
      type: Array,
      default: () => []
    },
    activeStudyId: {
      type: String,
      default: ''
    },
    activeSeries: {
      type: String,
      default: ''
    },
    seriesList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatStudyDate(dateString) {
      if (!dateString) return 'N/A';
      return dateString.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
    },
    filteredSeries(studyId) {
      return this.seriesList.filter(series => series.studyId === studyId);
    }
  }
}
</script>

<style scoped>
@import '../styles/variables.css';

.series-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--panel-width);
  background-color: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: var(--transition-normal);
  overflow: hidden;
}

.series-panel.collapsed {
  width: var(--collapsed-panel-width);
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: var(--spacing-md);
  background-color: #283142;
  border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.studies-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

.study-item {
  margin-bottom: var(--spacing-sm);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.study-header {
  padding: var(--spacing-sm);
  cursor: pointer;
  background-color: #2c3e50;
  transition: var(--transition-fast);
}

.study-header:hover {
  background-color: #34495e;
}

.study-header.active {
  background-color: #2c3e50;
  border-left: 3px solid var(--primary-color);
}

.study-date {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  font-weight: bold;
}

.study-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-list {
  padding: var(--spacing-xs);
}

.series-item {
  display: flex;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs);
  background-color: var(--bg-hover);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.series-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.series-item.active {
  background-color: var(--bg-active);
  border-left: 2px solid var(--primary-color);
}

.series-thumbnail {
  width: 60px;
  height: 60px;
  min-width: 60px;
  position: relative;
  margin-right: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background-color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 20px;
  background-color: var(--bg-header);
  position: relative;
}

.series-number-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: rgba(64, 158, 255, 0.6);
  color: white;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: bold;
}

.series-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.series-loading-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.5);
}

.loading-progress {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.loading-percentage {
  position: absolute;
  bottom: 5px;
  right: 3px;
  font-size: 9px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1px 3px;
  border-radius: 2px;
}

.series-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.series-modality {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  font-weight: bold;
}

.series-number {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.series-description {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
</style>
